<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JDO - Javascript Data Objects</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jdo.js"></script>
<script src="test.js"></script>
<script>
	
	var obj = [];
	
	jQuery( function() {
		$.ajax("http://api.flickr.com/services/feeds/photos_public.gne?tags=waterfalls&lang=en-us&format=json", {
			
			dataType: 'jsonp',
			jsonp: 'jsoncallback',
			success: function(data) {
				obj = data.items;
				
				Queryable(obj);
				
				$('select#demo').removeAttr('disabled');
				$('pre#output').html('');
				
				ShowOriginalObject();
			}
		});
		
		function ShowOriginalObject() {
			var result = {};
			var starttime = (new Date()).getTime();
			
			result = obj;
			
			var endtime = (new Date()).getTime();	
			var runtime = endtime - starttime;
						
			echo ( "Runtime: " + runtime + " ms\n\n" );
			
			echo ( "Code:\n" );
			echo ( "	obj\n" );
			echo ( "\n" );
			
			echo ( "Result:\n" );
			echo ( dump(result) + "\n\n\n\n\n" );
		}
		
		function ShowSelect() {
			var result = {};
			var starttime = (new Date()).getTime();
			
			result = obj.Select(['title', 'link', 'date_taken', 'published', 'author', 'tags']);
			
			var endtime = (new Date()).getTime();	
			var runtime = endtime - starttime;
						
			echo ( "Runtime: " + runtime + " ms\n\n" );
			
			echo ( "Code:\n" );
			echo ( "	obj.Select(['title', 'link', 'date_taken', 'published', 'author', 'tags'])\n" );
			echo ( "\n" );
			
			echo ( "Result:\n" );
			echo ( dump(result) + "\n\n\n\n\n" );
		}
		
		function ShowWhere() {
			var result = {};
			var starttime = (new Date()).getTime();
			
			result = obj.Where(function() {
				var twoDaysAgo = new Date();
				twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
				
				return (new Date(this['date_taken'])) < twoDaysAgo;
			});
			
			var endtime = (new Date()).getTime();	
			var runtime = endtime - starttime;
						
			echo ( "Runtime: " + runtime + " ms\n\n" );
			
			echo ( "Code:\n" );
			echo ( "	obj.Where(function() {\n" );
			echo ( "		var twoDaysAgo = new Date();\n" );
			echo ( "		twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);\n" );
			echo ( "		\n" );
			echo ( "		return (new Date(this['date_taken'])) < twoDaysAgo;\n" );
			echo ( "	});\n" );
			echo ( "\n" );
			
			echo ( "Result:\n" );
			echo ( dump(result) + "\n\n\n\n\n" );
		}
		
		function ShowOrderBy() {
			var result = {};
			var starttime = (new Date()).getTime();
			
			result = obj.OrderBy(['date_taken DESC', 'title']);
			
			var endtime = (new Date()).getTime();	
			var runtime = endtime - starttime;
						
			echo ( "Runtime: " + runtime + " ms\n\n" );
			
			echo ( "Code:\n" );
			echo ( "	obj.OrderBy(['date_taken DESC', 'title'])\n" );
			echo ( "\n" );
			
			echo ( "Result:\n" );
			echo ( dump(result) + "\n\n\n\n\n" );
		}
		
		function ShowLimit() {
			var result = {};
			var starttime = (new Date()).getTime();
			
			result = obj.Limit(5);
			
			var endtime = (new Date()).getTime();	
			var runtime = endtime - starttime;
						
			echo ( "Runtime: " + runtime + " ms\n\n" );
			
			echo ( "Code:\n" );
			echo ( "	obj.Limit(5)\n" );
			echo ( "\n" );
			
			echo ( "Result:\n" );
			echo ( dump(result) + "\n\n\n\n\n" );
		}
		
		function ShowFull() {
			var result = {};
			var starttime = (new Date()).getTime();
			
			result = obj.Select(['title', 'link', 'date_taken', 'published', 'author', 'tags'])
						.Where(function() {
							var twoDaysAgo = new Date();
							twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
							
							return (new Date(this['date_taken'])) < twoDaysAgo;
						})
						.OrderBy(['date_taken DESC', 'title'])
						.Limit(5);
			
			var endtime = (new Date()).getTime();	
			var runtime = endtime - starttime;
						
			echo ( "Runtime: " + runtime + " ms\n\n" );
			
			echo ( "Code:\n" );
			echo ( "	obj.Select(['title', 'link', 'date_taken', 'published', 'author', 'tags'])\n" );
			echo ( "	   .Where(function() {\n" );
			echo ( "	       var twoDaysAgo = new Date();\n" );
			echo ( "	       twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);\n" );
			echo ( "\n" );
			echo ( "	       return (new Date(this['date_taken'])) < twoDaysAgo;\n" );
			echo ( "	   })\n" );
			echo ( "	   .OrderBy(['date_taken DESC', 'title'])\n" );
			echo ( "	   .Limit(5);\n" );
			echo ( "\n" );
			
			echo ( "Result:\n" );
			echo ( dump(result) + "\n\n\n\n\n" );
		}
		
		$('select#demo').change(function() {
			$('pre#output').html('');
			
			switch($('option:selected',this).val()) {
				case '0':
					ShowOriginalObject();
					break;	
				case '1':
					ShowSelect();
					break;
				case '2':
					ShowWhere();
					break;
				case '3':
					ShowOrderBy();
					break;
				case '4':
					ShowLimit();
					break;
				case '5':
					ShowFull();
					break;
			}
		});
	});
</script>

</head>
<body>
<h1>JDO - Javascript Data Objects</h1>
<label for="demo">Select a query</label>
<select id="demo" disabled="disabled">
	<option value="0" selected="selected">Original object</option>
	<option value="1">Select title, link, date_taken, published,author and tags</option>
	<option value="2">Filter where date is before 2 days ago</option>
	<option value="3">Order by title ascending then date_taken descending</option>
	<option value="4">Return the first 5 items</option>
	<option value="5">The kitchen sink (all of the above)</option>
</select>
<pre id="output">Loading JSON from Flickr...</pre>
</body>
</html>
